<template>
    <div>
        <!-- <vueCropper style="width: 90%;height: 260px;margin-left: 5%;margin-top: 15px"
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber"></vueCropper>
        <input style="margin-left: 20px;margin-top: 15px" id="file_input" type="file" capture="camera"/>
        <div class="btn" @click="compressImg()">上传头像</div>
        <span>{{status}}</span> -->
    </div>
</template>
 
<script>
    import { MessageBox, Indicator,Toast,Actionsheet  } from "mint-ui";
    import $ from 'jquery'
    export default {
        name: "ImageUpload",
        components:{

            MessageBox,
            Indicator,
            Toast,
 
        },
        mounted(){
             //wxapi.wxRegister(this.wxRegCallback) 
            let _self = this;
            $("input[type='file']").change(function(){
                Indicator.open();
                let file = this.files[0];
                if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件    
                    reader.onloadend = function (e) {
                        _self.option.img = e.target.result;
                        Indicator.close();
                    };
                }
            });
           
        },
        data(){
            return{
                option: {
                    img: "",                         //裁剪图片的地址
                    info: true,                      //裁剪框的大小信息
                    outputSize: 0.7,                   // 裁剪生成图片的质量
                    outputType: 'jpeg',              //裁剪生成图片的格式
                    canScale: true,                 // 图片是否允许滚轮缩放
                    autoCrop: true,                  // 是否默认生成截图框
                    autoCropWidth: 100,              // 默认生成截图框宽度
                    autoCropHeight: 100,             // 默认生成截图框高度
                    fixed: false,                    //是否开启截图框宽高固定比例
                    fixedNumber: [4, 4]              //截图框的宽高比例
                },
                status:'',
                headImg:'',
                token:''
            }
        },
        created(){
          if (localStorage.token) {
                this.token=localStorage.getItem('token');
                
            }
           
        },
        methods:{
            showToast:function (msg) {
                Toast({
                    message: msg,
                    position: 'bottom',
                    duration: 2000
                })
            },
            compressImg:function () {
                let _self = this;
                this.$refs.cropper.startCrop();
                this.$refs.cropper.getCropData((data) => {
                    let file = _self.convertBase64UrlToBlob(data);
                    file.name = 'head.jpg';
                    _self.uploadAction(file);
                })
            },
            uploadAction:function (file) {
                Indicator.open();
                let _self = this;
                let param = new FormData();  // 创建form对象
                param.append('head_pic',  file, file.name);  // 通过append向form对象添加数据
                let config = {
                    headers: {'Content-Type': 'multipart/form-data','Authorization':"bearer "+this.token},
                     
                };
                // 添加请求头
                this.$axios.post('/v1/user/updateUserInfo', param, config)
                    .then(response => {
                      if(response.status == 200){
                          let data = response.data;
                          console.log(data);
                          Indicator.close();
                          //处理服务器返回数据
                      }
                    })
                    .catch(error=>{
                        Indicator.close();
                        console.log(error);
                    })
            },
            // 将base64的图片转换为file文件
            convertBase64UrlToBlob(urlData) {
                let bytes = window.atob(urlData.split(',')[1]);//去掉url的头，并转换为byte
                //处理异常,将ascii码小于0的转换为大于0
                let ab = new ArrayBuffer(bytes.length);
                let ia = new Uint8Array(ab);
                for (var i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }
                return new Blob([ab], { type: 'image/jpeg' });
            },
            // wxRegCallback () {
            // // 用于微信JS-SDK回调
            //     this.wxShareTimeline()
            //     this.wxShareAppMessage()
            // },
            // wxShareTimeline () {
            // // 微信自定义分享到朋友圈
            // let option = {
            //     title: '限时团购周 挑战最低价', // 分享标题, 请自行替换
            //     link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
            //     imgUrl: '/static/picture/xjzm.png', // 分享图标, 请自行替换，需要绝对路径
            //     success: () => {
            //     alert('分享成功')
            //     },
            //     error: () => {
            //     alert('已取消分享')
            //     }
            // }
            // // 将配置注入通用方法
            // wxapi.ShareTimeline(option)
            // },
            // wxShareAppMessage () {
            // // 微信自定义分享给朋友
            // let option = {
            //     title: '限时团购周 挑战最低价', // 分享标题, 请自行替换
            //     desc: '限时团购周 挑战最低价', // 分享描述, 请自行替换
            //     link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
            //     imgUrl: '/static/picture/xjzm.png', // 分享图标, 请自行替换，需要绝对路径
            //     success: () => {
            //     alert('分享成功')
            //     },
            //     error: () => {
            //     alert('已取消分享')
            //     }
            // }
            // // 将配置注入通用方法
            // wxapi.ShareAppMessage(option)
            // }
           
        }
    }
</script>
 
<style scoped>
    .btn{
        width: 80%;
        height: 40px;
        margin-top: 50px;
        color: white;
        border-radius: 20px;
        background-color: #3377ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10%;
    }
</style>
